<!-- 救助机构审核 -->
<template>
  <el-card>
    <el-row>
      <el-form ref="form" :model="searchDto" inline label-width="auto" label-suffix=":">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="searchDto.keywords"
            placeholder="请输入救助对象/监护人姓名"
            style="width:250px"
          ></el-input>
        </el-form-item>

        <el-form-item label="创建时间" label-width="90px">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <page-table
      ref="recovery"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column type="index" label="编号" width="80" align="center" />
      <el-table-column prop="recoveryName" label="儿童姓名" align="center" />
      <el-table-column prop="recoveryAge" label="儿童年龄" align="center" />
      <el-table-column prop="recoveryCard" label="身份证号" align="center" />
      <el-table-column prop="guardianName" label="监护人" align="center" />
      <el-table-column prop="guardianPhone" label="监护人联系方式" align="center" />
      <el-table-column prop="recoveryTypeName" label="救助类型" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">

          <sz-badge
            :value="scope.row.status | keyText('etkfjzzt')"
            :type="statusStyle(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="详情" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-view"
              @click="viewDetail(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </page-table>
  </el-card>
</template>
<script>
export default {
  name: 'RecoveryManage',
  data() {
    return {
      date: [],
      pageData: {},
      loading: false,
      searchDto: {
        keywords: null,
      }
    }
  },
  methods: {
    statusStyle(row) {
      switch (row.status) {
        case "CL_APPLY":
        case "INSTITUTE_APPLY":
          return "warning";
        case "CL_REJECT":
          return "danger";
        case "FINISH":
        case "EVALUATE":
          return "success";
      }
    },
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      if (this.date) {
        tem.startTime = this.date[0];
        tem.endTime = this.date[1];
      }
      this.API.getInstituteRecoveryPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    // 查询
    search() {
      this.getPageData();
    },
    //清空
    clear() {
      this.$refs.form.resetFields()
      this.date = [];
      this.getPageData();
    },
    viewDetail({ id }) {
      this.$router.push({ name: "recoveryDetail", query: { id, type: 'mechanism' } })
    }
  },
  mounted() {
    this.getPageData();
  },
}
</script>
<style scoped lang="scss"></style>
